<template>
	<view style="z-index:0;position:absolute;left:0;right:0;top:0;height:395px;background-image:radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);background-size:396px 396px;background-repeat:no-repeat;filter:blur(50px);"></view>
	<base-page title="订单详情" :showBorder="false" backgroundColor="bg-default">
		<view v-if="detail" class="p-16">
			<view class="p-16 flex justify-between item-center bg-white radius-12">
				<view class="flex-col">
					<view class="fs-14 font-bold mb-4">订单编号：{{detail.orderNo}}</view>
					<view class="flex item-center">
						<image class="cu-avatar radius-4 w-24 h-24 mr-8" :src="detail.orderAvatar"></image>
						<text>{{detail.orderNickName}}</text>
					</view>
				</view>
				<text class="text-bold" :style="`color:${currentOrderState.color}`">{{currentOrderState.text}}</text>
			</view>
			<view class="p-16 bg-white mt-12 radius-12">
				<view class="flex">
					<image class="radius-8 mr-12 flex-shrink" style="width:88px;height:88px;" :src="activeImg"></image>
					<view class="flex-col justify-between">
						<view class="text-bold">{{detail.activeTitle}}</view>
						<view class="fs-12 text-color-hint">数量 x{{detail.orderNum}}</view>
					</view>
				</view>
				<view class="flex justify-end" style="border-top: 1px solid #F5F5F5;">
					<text class="fs-12 text-black">实收积分:<text class="color-primary fs-16 text-bold">{{detail.payPrice}}积分</text></text>
				</view>
			</view>
			<view class="mt-12 mb-8 fs-14 c3 font-bold">订单信息</view>
			<view class="p-16 radius-12 bg-white">
				<view class="flex fs-14 mt-12 justify-between item-center">
					<text>下单时间：</text>
					<text class="text-color-hint">{{detail.orderTime}}</text>
				</view>
			</view>
		</view>
	</base-page>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, computed } from 'vue'
	import {sellOrderDetailApi} from '@/pagesF/api/index.js'
	import { numberFormat } from '@/utils/index.js'
	
	const orderStateDict = {
		1: {
			text: '待支付',
			color: '#FA4543'
		},
		2: {
			text: '待核销',
			color: '#FCB513'
		},
		3: {
			text: '核销中',
			color: '#FA4543'
		},
		4: {
			text: '已取消',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		5: {
			text: '已完成',
			color: '#16BE62'
		},
		6: {
			text: '已关闭',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		7: {
			text: '已核销',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		9: {
			text: '待审核',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		10: {
			text: '待成团',
			color: 'rgba(51, 51, 51, 0.60)'
		},
	}
	
	const currentOrderState = computed(() => {
		if (detail.value) {
			return orderStateDict[detail.value.orderState] || {}
		}
	})
	
	// 活动首图
	const activeImg = computed(() => {
		return detail.value && detail.value.activeImg && detail.value.activeImg.split(',')[0] || ''
	})
	
	const detail = ref(null)
	const getOrderDetail = (id) => {
		sellOrderDetailApi({id}).then(res => {
			detail.value = res
		})
	}
	
	onLoad((options) => {
		if (options.id) {
			getOrderDetail(options.id)
		}
	})
</script>
